/** { "style":{ "navigationStyle": "custom", "navigationBarTextStyle": "white" } } */

<template>
	<view>

		<view :class="[isiPhone ? 'pb-180' : 'pb-140', 'order-page']">
			<view class="bage-co"></view>

			<view class="con">
				<view class="bar" :style="{ height: customBar + 'px' }"></view>
				<view class="relative z-index3">
					<u-navbar title="" leftIcon="arrow-left" bgColor="transparent" leftIconColor="#fff"
						@leftClick="leftClick" titleStyle="color:#fff"></u-navbar>
				</view>
				<view class="ststus mt14 mb72">
					{{statusBase[detail.info.status]}}
				</view>

				<view class="relative z-index2">
					<view class="box1 mt20">
						<view class="title-b">
							个人信息
						</view>
						<view class="form-item flex-lr-tbc mt2">
							<view class="le">
								车辆
							</view>

							<view class="right">
								<text :class="detail.car&&detail.car.pin? '':'red-color'">{{detail.car&&detail.car.pin? detail.car.pin: '车辆已被删除'}}</text>
								<!-- {{detail.car.pin}} -->
							</view>
						</view>

						<view class="form-item flex-lr-tbc mt2">
							<view class="le">
								姓名
							</view>

							<view class="right">
								{{detail.info.name}}
							</view>
						</view>

						<view class="form-item flex-lr-tbc mt2">
							<view class="le">
								手机号
							</view>

							<view class="right">
								{{detail.info.mobile}}
							</view>
						</view>

						<view class="form-item flex-lr-tbc mt2">
							<view class="le">
								身份证号码
							</view>

							<view class="right">
								{{detail.info.sfz}}
							</view>
						</view>


						<view class="form-item mt2 pb0">
							<view class="le">
								其他资料
							</view>

							<view class="right mt16">
								<image class="img2" :src="item" mode="aspectFill"
									v-for="(item, index) in getimgList(detail.info.images)" :key="index"
									@click="onImage(detail.info.images, index)">
								</image>
							</view>
						</view>
					</view>

					<view class="box1 mt20 pb0" v-if="detail.info.wx_image || detail.info.zfb_image">
						<view class="title-b">
							缴费二维码
						</view>

						<view class="form-item mt2 pt0">

							<view class="right mt16">
								<image class="img2" :src="detail.info.wx_image" mode="aspectFill"
									@click="onzpImage(detail.info.wx_image)" v-if="detail.info.wx_image"></image>
								<image class="img2" :src="detail.info.zfb_image" mode="aspectFill"
									@click="onzpImage(detail.info.zfb_image)" v-if="detail.info.zfb_image"></image>
							</view>
						</view>
					</view>

					<view class="box1 mt20 pb0" v-if="detail.info.pay_images">
						<view class="title-b">
							缴费截图
						</view>

						<view class="form-item mt2 pt0">
							<view class="right mt16">
								<image class="img2" :src="detail.info.pay_images" mode="aspectFill"
									@click="onImage(detail.info.pay_images, 0)"></image>

							</view>
						</view>
					</view>

					<view class="box1 mt20 pb0" v-if="detail.info.bd_file && detail.info.bd_file.length">
						<view class="title-b">
							保单图片
						</view>

						<view class="form-item mt2 pt0">
							<view class="right mt16">
								<image class="img2" src="__ROOT__/common/images/pdf.svg" mode="aspectFill"
									@click="onFile(detail.info.bd_file)"></image>
								<!-- <image class="img2" :src="item" v-for="(item,index) in detail.info.bd_images"
									mode="aspectFill" @click="onImage(detail.info.bd_images, index)"></image> -->

							</view>
						</view>
					</view>

					<view class="box1 mt20 pb0" v-if="detail.info.fp_image">
						<view class="title-b">
							发票图片
						</view>

						<view class="form-item mt2 pt0">
							<view class="right mt16">
								<image class="img2" :src="detail.info.fp_image" mode="aspectFill"
									@click="onImage(detail.info.fp_image, 0)"></image>

							</view>
						</view>
					</view>



					<view class="box1 mt20">
						<view class="title-b">
							订单信息
						</view>

						<view class="form-item flex-lr-tbc mt2">
							<view class="le">
								订单编号
							</view>

							<view class="right flex-tbc" @click="onCopy(detail.info.order_sn)">
								{{detail.info.order_sn}} <text class="ml10 mr10">|</text>
								<view class="btn-copy">
									复制
								</view>
							</view>
						</view>

						<view class="form-item flex-lr-tbc mt2">
							<view class="le">
								提交时间
							</view>

							<view class="right">
								{{detail.info.createtime}}
							</view>
						</view>

						<view class="form-item flex-lr-tbc mt2" v-if="detail.info.status == 4">
							<view class="le">
								完成时间
							</view>

							<view class="right">
								{{detail.info.end_time}}
							</view>
						</view>
					</view>
				</view>

			</view>




		</view>





		<view :class="[isiPhone? 'pb-68':'pb-32', 'fixed_b']">
			<view class="footer-f display_flex justify-content_flex-end">
				<view class="btns-base display_flex justify-content_flex-end mt18">

					<view class="btn btn1 relative">
						联系客服
						<button open-type="contact" class="btn-c">

						</button>
					</view>

					<view class="btn btn2" v-if=" detail.info.status == 2" @click="onPayWC">
						付款完成
					</view>
				</view>
			</view>
		</view>


		<u-popup :show="showPopup1" mode="center" @close="showPopup1 = false" bgColor="transparent">
			<view class="content-p content-p1">
				<image class="ww100 hh100" :src="zpImage" mode="aspectFill" @click="onImage(zpImage, 0)"></image>
			</view>


			<view class="btns flex-lr-tbc mt38">
				<view class="btn-w" @click="onSaveImage">
					点击保存到相册
				</view>

			</view>

		</u-popup>




		<u-popup :show="showPopup" mode="center" @close="showPopup = false" bgColor="transparent">
			<view class="content-p">
				<view class="clone" @click="showPopup = false">
					<image class="wh36" src="__ROOT__/common/images/clear-icon1.png" mode=""></image>
				</view>
				<view class="page-top flex-lr-tbc">
					<view class="title">
						上传截图
					</view>
				</view>

				<view class="cosnt flex-all-c flex-wrap">

					<view class="ww100">
						<view class="flex-rlc">
							<upload-image :fileList="fileList" :maxCount="1" @upload="upload" />
						</view>

						<view class="hint">
							请上传支付完成后的截图
						</view>
					</view>


				</view>

				<view class="btns flex-lr-tbc mt38">
					<view class="btn btn1" @click="showPopup = false">
						取消
					</view>
					<view class="btn btn2" @click="onSureJF">
						确认
					</view>
				</view>
			</view>

		</u-popup>

	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	const isiPhone = ref('')
	const statusBar = ref('')
	const customBar = ref('')
	const initPage = () => {
		isiPhone.value = uni.getStorageSync('isiPhone')
		statusBar.value = uni.getStorageSync('statusBar')
		customBar.value = uni.getStorageSync('customBar')
	}

	const pageTitle = ref('待支付')
	const pageId = ref('')

	const detail = ref({
		info: '',
		car: ''
	})

	const showPopup = ref(false)
	const showPopup1 = ref(false)

	const zpImage = ref('')

	const statusBase = {
		1: '待处理',
		2: '待缴费',
		3: '待审核',
		4: '已支付'
	}

	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		})
	}

	const fileList = ref([])
	const upload = (e) => {
		fileList.value = e
	}
	const getDatail = async () => {
		const res = await $post('/user/insure_order_info', {
			oid: pageId.value
		})

		detail.value = res
	}

	const getimgList = (img) => {
		if (!img) return []
		return img.split(',')
	}

	const onImage = (img, index) => {
		let imgList = img
		if (typeof img == 'string') {
			imgList = img.split(',')
		}
		uni.previewImage({
			urls: imgList,
			current: index
		})
	}

	const onCopy = (order) => {
		uni.setClipboardData({
			data: order,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			},
		})
	}

	const onzpImage = (img) => {
		zpImage.value = img
		showPopup1.value = true
	}

	const onPayWC = () => {
		showPopup.value = true
	}

	const onSaveImage = () => {
		xaoi.checkSetting(zpImage.value)
		// uni.saveImageToPhotosAlbum({
		// 	filePath: zpImage.value,
		// 	success: function() {
		// 		uni.showToast({
		// 			title: '保存成功',
		// 			icon: 'none'
		// 		})
		// 	},
		// 	fail: function() {
		// 		uni.showToast({
		// 			title: '保存失败',
		// 			icon: 'none'
		// 		})
		// 	}
		// })
	}

	const onSureJF = async () => {

		if (!fileList.value || fileList.value.length == 0) {
			xaoi.toast('请上传缴费记录');
			return;
		}
		const images = fileList.value.map((item) => item.url).join(',');
		const res = await $post('/user/insure_order_pay', {
			oid: pageId.value,
			images
		})

		if (!res) {
			xaoi.toast('提交成功');
			showPopup.value = false
			getDatail()

			// setTimeout(() => {
			// 	resetData()
			// }, 1000);
		}
	}

	const onFile = (file) => {
		console.log(file, '123123123')

		uni.downloadFile({
			// 示例 url，并非真实存在
			url: file,
			success: function(res) {
				console.log(res, 'resres123123123')
				// 文件预览
				uni.openDocument({
					filePath: res.tempFilePath,
					showMenu: true,
					success: function(res) {
						console.log('打开文档成功')
					}
				})
			},
			fail(e) {
				console.log(e, 'resres123123123')
			}
		})

	}

	Vue.onShow(() => {
		initPage()
	})
	Vue.onLoad((options) => {
		pageId.value = options.id
		getDatail()
	})
</script>
<style scoped lang='scss'>
	.bage-co {
		width: 100%;
		height: 310rpx;
		background: #348b8a;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.con {
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
		z-index: 2;

		.bage-con {
			width: 100%;
			height: 384rpx;
		}
	}

	.card-base-box {
		height: auto !important;
	}

	.card-cont {
		width: 702rpx;
		height: 276rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(0, 0, 0, 0.09);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto 0;
		padding: 48rpx 0 0 !important;

		.card-top {
			margin-top: 0 !important;
		}

		.info {
			border-top: 1rpx solid #e0e0e0;
			padding-top: 18rpx;
		}
	}

	.box1 {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 32rpx 0;

		.title-b {
			font-family: OPPOSans, OPPOSans;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 36rpx;
			padding: 20rpx 24rpx;
		}
	}

	.img2 {
		width: 164rpx;
		height: 156rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-bottom: 12rpx;
		margin-right: 10rpx;

		&:nth-child(4n) {
			margin-right: 0;
		}

	}

	.btn-copy {
		color: #348B8A;
	}

	.ststus {
		font-family: FZLanTingHei-R-GBK, FZLanTingHei-R-GBK;
		font-weight: 400;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
	}

	.pb0 {
		margin-bottom: 0 !important;
	}

	.pt0 {
		padding-top: 0 !important;
	}

	.content-p {
		width: 606rpx;
		height: 648rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 40rpx 42rpx 46rpx;
		position: relative;

		.clone {
			padding: 24rpx;
			position: absolute;
			top: 24rpx;
			right: 24rpx;
			z-index: 10;
		}

		.cosnt {
			width: 100%;
			height: 354rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 1rpx solid #BDBDBD;
			margin-top: 42rpx;
		}


		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #1C1C1C;
		}

		.hint {
			width: 100%;
			font-family: OPPOSans, OPPOSans;
			font-weight: 400;
			font-size: 24rpx;
			color: #7D7D7D;
			line-height: 28rpx;
			text-align: center;
			margin-top: 56rpx;
		}
	}

	.btns {
		.btn {
			width: 252rpx;
			height: 76rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: OPPOSans, OPPOSans;
			font-weight: 400;
			font-size: 26rpx;
			text-align: center;
			line-height: 74rpx;
		}

		.btn1 {
			border: 1rpx solid #BDBDBD;
			color: #7D7D7D;
		}

		.btn2 {
			background: #348B8A;
			border: 1rpx solid #348B8A;
			color: #fff;

		}
	}
	.red-color {
		color: #E50004;
	}
</style>